<template>
	<view class="center">
		<u-navbar title="订单列表" :background="background" title-color="#ffffff" back-icon-color="#ffffff"></u-navbar>
		<view class="content">
			<view class="headersearch">
				<view class="search-wrapper">
					<view class="input-wrapper">
						<input class="input" type="text" @confirm="onSearch" v-model="value" placeholder="请输入产品名称" />
						<u-icon class="iconfont " name="search"></u-icon>
					</view>
					<view class="button" @click="onSearch">搜索</view>
				</view>
			</view>

			<u-tabs name="cate_name" count="cate_count" :list="list" :is-scroll="false" :current="current" @change="change" active-color="#F53942" bg-color="#f5f5f5"></u-tabs>
		</view>
		<!-- 商品信息 -->
		<view class="goods-center">
			<view class="title">
				<view>
					<image class="img" :src="imgBaseUrl + '/ache/images/logoicon.png'" mode="aspectFit"></image>
					<text>店铺: 百疼痛管理店</text>
				</view>
				<view class="goods-state">已提交</view>
			</view>
			<!-- 订单item -->
			<view class="goods-item">
				<view class="goods-info">
					<image class="img" :src="imgBaseUrl + '/ache/images/logoicon.png'"></image>
					<view class="goods-details">
						<view class="goods-title">悄红颜紧致提拉精华液</view>
						<view class="goods-Spec">150g/瓶</view>
						<view class="goods-Price">
							<view class="Price">￥29.90</view>
							<view class="quantity">X 2</view>
						</view>
					</view>
				</view>
			</view>
			<view class="allgoods"><view class="price">总价￥74.80</view></view>
			<view class="order-bottom">
				<view class="order-detail" @click="ondetail">查看详情</view>
				<view class="order-detail" @click="ondelete">删除订单</view>
				<view class="order-cancel" @click="oncancel">取消订单</view>
			</view>
		</view>
		<u-modal v-model="showpopup" :content="content" :show-title="false" show-cancel-button="false" @confirm="confirm" @cancel="cancel"></u-modal>
	</view>
</template>

<script>
import { mapGetters } from 'vuex';
export default {
	data() {
		return {
			background: {
				backgroundColor: '#F53942'
			},
			value: '', //搜索值
			list: [
				{
					name: '全部'
				},
				{
					name: '已提交'
				},
				{
					name: '待收货'
				},
				{
					name: '已完成'
				},
				{
					name: '已取消'
				}
			],
			current: 0, //tabs选中项样式
			showpopup: false, //是否删除弹窗提示
			content: '' //弹窗的提示文案
		};
	},

	computed: {
		...mapGetters(['imgBaseUrl'])
	},
	methods: {
		//搜索
		onSearch() {
			console.log(this.value, '搜索的值');
		},
		//切换tabs
		change(index) {
			this.current = index;
		},
		//查看详情
		ondetail() {
			uni.navigateTo({
				url:'/pages/order-detail/index'
			})
			console.log('查看详情');
		},
		//取消订单
		oncancel() {
			this.showpopup = true;
			this.content = '您是否要取消订单';
			console.log('取消订单');
		}, //删除订单
		ondelete() {
			this.showpopup = true;
			this.content = '您是否要删除订单';
			console.log('删除订单');
		},
		//弹窗点击了确定
		confirm() {
			console.log('点击了确定');
		},
		//弹窗点击了取消
		cancel() {
			console.log('点击了取消');
		}
	}
};
</script>
<style lang="scss">
@import '@/styles/mixin.scss';
.center {
	min-height: 100%;
	background-color: #f5f5f5;
	.content {
		width: 100%;
		.headersearch {
			overflow: hidden;
			.search-wrapper {
				display: flex;
				align-items: stretch;
				padding-top: 20rpx;
				margin: 20rpx;
			}
			.input-wrapper {
				position: relative;
				flex: 1;
				.input {
					width: 100%;
					background-color: #ffffff;
					opacity: 0.8;
					height: 70rpx;
					border-radius: 60rpx 0 0 60rpx;
					padding-left: 60rpx;
				}
				.iconfont {
					position: absolute;
					top: 50%;
					transform: translateY(-50%);
					left: 20rpx;
				}
			}
			.button {
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 0 50rpx;
				background-color: #cccccc;
				border-radius: 0 60rpx 60rpx 0;
				color: #ffffff;
				opacity: 0.8;
			}
		}
	}
	.goods-center {
		width: 100%;
		padding: 20rpx;
		margin-top: 20rpx;
		width: 100%;
		background-color: #ffffff;
		border-radius: 20rpx;
		.title {
			margin-bottom: 20rpx;
			display: flex;
			padding: 20rpx;
			font-weight: bold;
			flex-direction: row;
			justify-content: space-between;
			align-items: baseline;
			@include border-bottom-1px(#ececec);
			.img {
				width: 40rpx;
				height: 40rpx;
				border-radius: 50%;
				margin-right: 20rpx;
				background-color: #f5f5f5;
			}
			.goods-state {
				font-size: 26rpx;
				font-weight: 400;
				color: #e9363f;
			}
		}
		.allgoods {
			display: flex;
			flex-direction: row-reverse;
			.price {
				padding: 20rpx;
				font-size: 28rpx;
				font-weight: bold;
				color: #222222;
			}
		}
		.order-bottom {
			text-align: center;
			display: flex;
			flex-direction: row-reverse;
			.order-detail {
				margin-left: 40rpx;
				padding: 8rpx;
				font-size: 24rpx;
				font-weight: 400;
				color: #e9363f;
				width: 152rpx;
				height: 51rpx;
				background: #ffffff;
				border: 1rpx solid #f53942;
				border-radius: 25rpx;
			}
			.order-cancel {
				padding: 8rpx;
				font-size: 24rpx;
				font-weight: 400;
				color: #888888;
				width: 152rpx;
				height: 51rpx;
				background: #ffffff;
				border: 1rpx solid #888888;
				border-radius: 25rpx;
			}
		}
		.goods-item {
			padding-top: 20rpx;
			border-bottom: 1rpx solid #f2f2f2;
			overflow: hidden;
			.goods-info {
				display: flex;
				flex-direction: row;
				flex-wrap: nowrap;
				.img {
					display: flex;
					height: 175rpx;
					width: 150rpx;
				}
				.goods-details {
					width: 676rpx;
					.goods-title {
						text-overflow: -o-ellipsis-lastline;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						line-clamp: 2;
						-webkit-box-orient: vertical;
						padding: 10rpx;
						font-size: 26rpx;
						font-weight: 400;
						color: #222222;
					}
					.goods-Spec {
						padding: 10rpx;
						display: inline-block;
						font-size: 20rpx;
						color: #888888;
						background-color: #f6f6f6;
						border-radius: 5rpx;
					}
					.goods-Price {
						padding: 10rpx;
						width: 100%;
						display: flex;
						flex-direction: row;
						flex-wrap: nowrap;
						justify-content: space-between;
					}
					.Price {
						color: #f53942;
						font-size: 30rpx;
						font-weight: bold;
					}
					.quantity {
						font-size: 26rpx;
						font-weight: 500;
						color: #888888;
						padding-right: 24rpx;
					}
				}
			}
		}
	}
}
</style>
